{% load i18n static common %}
<div style="padding: 10px;min-height: 370px;min-width: 580px">
    <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        {% with form.form as f %}
            <div style="padding-bottom: 20px">{{ f.emp }}</div>
            <div class="layui_form_item">
                {% layui_inline f.start_time %}
                {% layui_inline f.end_time %}
            </div>
            <div class="layui_form_item">
                {% layui_inline f.category %}
            </div>
            <div class="layui-form-item layui-hide" id="vacationCountitem">
                {% layui_inline f.vacation_number %}
                <div class="layui-inline">
                    <label for="" class="layui-form-label">{% trans "employee_label_vacation" %}</label>
                    <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationCount" type="text" class="layui-input" disabled
                               style="min-width: 110px !important;">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <a id="vacationRefresh" href="javascript:void(0);" class="layui-btn layui-btn-sm"
                           onclick="vacationRefresh()">{% trans 'employee_btn_vacationRefresh' %}</a>
                    </div>
                </div>
                <div class="layui-inline">
                    <label for="" class="layui-form-label">{% trans "employee_label_vacationLeft" %}</label>
                    <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationleft" type="text" class="layui-input" disabled
                               style="min-width: 110px !important;">
                    </div>
                </div>
            </div>
            <div class="layui_form_item layui-hide">
                {% layui_inline f.type %}
            </div>
            <div class="layui_form_item">
                {% layui_inline f.reason %}
            </div>
            <div class="layui_form_item">
                {% layui_inline f.attachment %}
            </div>
        {% endwith %}
    </form>
</div>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        $("form.layui-form input.layui-datetime").each(function () {
            laydate.render({elem: this, type: 'datetime'});
        });
        $("form.layui-form input.layui-date").each(function () {
            laydate.render({elem: this, type: 'date'});
        });
        $("form.layui-form input.layui-time").each(function () {
            laydate.render({elem: this, type: 'time'});
        });
        $("#id_category").attr("lay-filter", "category");
        {% block form_verify %}
            form.verify({});
        {% endblock %}
        form.render();
        form.on('select(category)', function (data) {
            var checkStatus = layui.table.checkStatus('id-employee-frame-selected');
            var vacation_type = false;
            if (checkStatus.data.length == 1) {
                {% for category_type in form.form.base_fields.category.queryset %}
                    if ({{ category_type.id }}== Number(data.value) && {{ category_type.leave_category_type }} == 3){
                    vacation_type = true;
                }
                {% endfor %}
                if (vacation_type) {
                    $('#vacationCountitem').removeClass('layui-hide')
                    vacationRefresh(checkStatus.data[0].id);
                } else {
                    $('#vacationCountitem').addClass('layui-hide')
                }
            }
            console.log(4564)
        });
    });

    function employee_selected_addblock() {
        var checkStatus = layui.table.checkStatus('id-employee-frame-selected');
        var vacation_type = false;
        if (checkStatus.data.length == 1) {
            var data = $("#id_category option:selected");
            {% for category_type in form.form.base_fields.category.queryset %}
                if ({{ category_type.id }}== Number(data[0].value) && {{ category_type.leave_category_type }} == 3){
                vacation_type = true;
            }
            {% endfor %}
            if (vacation_type) {
                $('#vacationCountitem').removeClass('layui-hide');
                vacationRefresh(checkStatus.data[0].id);
            } else {
                $('#vacationCountitem').addClass('layui-hide');
            }
        } else {
            $('#vacationCountitem').addClass('layui-hide');
            $('#id_vacation_number').val(0);
            return false
        }
    }

    function vacationRefresh(employee_id) {
        if (employee_id == undefined) {
            var checkStatus = layui.table.checkStatus('id-employee-frame-selected');
            if (checkStatus.data.length == 1) {
                employee_id = checkStatus.data[0].id
            } else {
                $('#vacationCountitem').addClass('layui-hide')
                return false
            }
        }
        $.ajax({
            url: "/personnel/vacation_refresh/?emp=" + employee_id
            , type: "GET"
            , contentType: false
            , processData: false
            , success: function (response) {
                response = $.parseJSON(response)
                if (response['code'] == 0) {
                    $('#vacationCountitem').removeClass('layui-hide')
                    $('#vacationCount').val(response['vacation_days'])
                    $('#vacationleft').val(response['vacation_left'])
                }
            }
        });
    }
</script>